<script setup lang="ts">
import router from "@/router";
import GetRequest from "util/requests/getRequest";
import PostRequest from "util/requests/PostRequest";
import { userInfoStore } from "store/userInfo";
import DeleteRequest from "util/requests/deleteRequest";
import { ElMessage } from "element-plus";
import { computed, ref } from "vue";
import { storeToRefs } from "pinia";
const props = defineProps(["video","isOperator"])
let { isLogin, userInfo } = storeToRefs(userInfoStore())
console.log(isLogin);
const isShow = computed(()=>localStorage.getItem("userInfo")!=null&&isLogin.value)
const  getRequest = new GetRequest()
const  postRequest = new PostRequest()
const  deleteRequest = new DeleteRequest()
const change = (index)=>{
  const uId= userInfo.value.LoginUser.id
  const vieoItem = props.video[index]
  const params ={
        userId: uId,
        videoId:vieoItem.video.id
  }
  console.log(params);
  if(vieoItem.isCollect){
    vieoItem.isCollect =!vieoItem.isCollect
    getRequest.getCollectByIds({videoId:vieoItem.video.id,userId:uId}).then((res:any)=>{
            if(res.code ==200){
              deleteRequest.deleteCollect({id:res.obj.id}).then((res1:any)=>{
                // console.log(res1);
                if(res1.code==200){
                  ElMessage({
                    dangerouslyUseHTMLString: true,
                    message: res1.msg,
                    type:"success"
                  })
                }else {
                  ElMessage({
                    dangerouslyUseHTMLString: true,
                    message: res1.msg,
                    type:"error"
                  })
                }
              })
            }
    })
    // deleteRequest.deleteCollect()
  }else{
    vieoItem.isCollect =!vieoItem.isCollect
    postRequest.insertCollect(params).then((res:any)=>{
      // console.log(res);
      if(res.code==200){
        ElMessage({
          dangerouslyUseHTMLString: true,
          message: res.msg,
          type:"success"
        })
      }else {
        ElMessage({
          dangerouslyUseHTMLString: true,
          message: res.msg,
          type:"error"
        })
      }
    })
    // console.log("收藏成功");
  }
}
</script>

<template>
  <div v-for="(item,index) in video"  :key="index" class="box">
    <div class="box-background"></div>
    <div  class="common-layout">
      <el-main @click="router.push('/detail/'+item.video.id)"  class="box-main">
        <img  :title="item.video.videoTitle" :src="item.video.coverUrl" alt="封面">
      </el-main>
      <el-footer class="box-footer">
        <h2><a :href="'/detail/'+item.video.id">{{item.video.videoTitle}}</a></h2>
        <div v-if="isShow"  class="operator">
             <slot :index="index" :change="change" :isCollect="item.isCollect" :id="item.video.id" name="operator"></slot>
        </div>
      </el-footer>
    </div>
  </div>
</template>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.box {
  margin: 5px 10px;
  width: 17%;
  height: 200px;
  position: relative;
  background: transparent;
}
.box-background{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(135deg,#ffeeee,#ddefbb);
  z-index: -1;
  box-shadow: 3px 3px 3px #c7e0f4;
  border-radius: 20px;
}
.box-main {
  width: 100%;
  height: 75%;
  border-bottom: 2px solid;
  border-radius: 20px 20px 0  0 ;
  cursor: pointer;
  overflow: hidden;
}
.box-footer {
  width: 100%;
  height: 50px;
  border-radius: 0  0 20px 20px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  text-align: center;
}
a{
  text-decoration: none;
  color:#1c7ed6;
  text-align: center;
}
.common-layout {
  width: 100%;
  height: 100%;
}
h2{
  text-align: center;

}
</style>